<template>
    <div>
        <searchBox @searchChange = "searchChange" />
        <div class="gva-table-box">
        <el-card>
            <template #header>昨日数据概览</template>
            <el-row  style="margin:30px auto">
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-statistic title="昨日广告消耗(元)" precision="2" :value="yesterdayData.yesterdayConsume" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="本月广告消耗(元)" precision="2" :value="yesterdayData.curMonthConsume" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="昨日新增用户"  :value="yesterdayData.yesterdayNewUser"/>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="昨日买量收入(元)" precision="2" :value="yesterdayData_yesterdayAmount_tran" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="本月买量收入(元)" precision="2" :value="yesterdayData_curMonthAmount_tran" />
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
        </el-card>
    </div>
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
    <div class="gva-table-box">
    <el-text class="mx-1" size="large">详细数据</el-text>
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        :height="tableData.length > 10 ? 600 : null"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="日广告消耗(元)"
          prop="yesterdayConsume"
        >
        </el-table-column>
        <el-table-column
          align="left"
          label="新增用户"
          prop="yesterdayNewUser"
        />
        <el-table-column
          align="left"
          label="日买量收入(元)"
          prop="yesterdayAmount"
        >
        </el-table-column>
      </el-table>
    </div>
        </div>
    </template>  
    <script lang="ts" setup>
    import { ref,watch } from 'vue'
    import lineChart from '../../components/echarts/lineChart.vue';
    import searchBox from '../../components/search/searchBox.vue';
    import { useTransition } from '@vueuse/core'
    import type { TabsPaneContext } from 'element-plus';
    import {
        getHugeList
} from '@/api/openApi'
import { sumByKey } from '../../utils/fmtData'
// =========== 表格控制部分 ===========
const page = ref(1)
const tableData = ref([])
const yesterdayData = ref([])
const lineData = ref([])
const searchInfo = ref({})
const activeName = ref<string|number>('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  lineData.value = []
  setTimeout(() => {
    lineData.value = JSON.parse(JSON.stringify(tableData.value))
  }, 200);
}


var searchChange = function(date){
  searchInfo.value = date
  getTableData()
}

const date = new Date()
date.setDate(date.getDate() - 1)
const date1 = date.toISOString().split('T')[0]; 
const yesterDaySearchDate = {start_date:date1,end_date:date1}

// 查询
const chartData = ref({
  xAxis: [],
  series: [{
    name: '日广告消耗',
    type: 'line',
    data: []
  },{
    name: '新增用户',
    type: 'line',
    data: []
  },{
    name: '日买量收入',
    type: 'line',
    data: []
  
  }],
  legend: ['日广告消耗','新增用户','日买量收入'],
  title: '指标趋势'
})
const getTableData = function() {
  getHugeList({  type: 'advertisement', ...searchInfo.value }).then(res=>{
    if (res.code === 0) {
      let arr = []
      chartData.value.xAxis = []
      chartData.value.series[0].data = []
      chartData.value.series[1].data = []
      chartData.value.series[2].data = []
      res.data.list.forEach(element => {
          if(element.response)
            arr.push( Object.assign({},JSON.parse(element.response),{date:element.date}))
          chartData.value.xAxis.push(element.date)
          chartData.value.series[0].data.push(JSON.parse(element.response).yesterdayConsume)
          chartData.value.series[1].data.push(JSON.parse(element.response).yesterdayNewUser)
          chartData.value.series[2].data.push(JSON.parse(element.response).yesterdayAmount)
      });
      lineData.value = tableData.value = sumByKey(arr,'date')
      if(searchInfo.value.start_date == yesterDaySearchDate.start_date && searchInfo.value.end_date == yesterDaySearchDate.end_date){
        yesterdayData.value = JSON.parse(res.data.list[0].response)
        yesterdayData_yesterdayAmount.value = yesterdayData.value.yesterdayAmount
        yesterdayData_curMonthAmount.value = yesterdayData.value.curMonthAmount
      }
    }
  })
}
const yesterdayData_yesterdayAmount = ref(0)
const yesterdayData_yesterdayAmount_tran = useTransition(yesterdayData_yesterdayAmount, {
  duration: 500,
})
const yesterdayData_curMonthAmount = ref(0)
const yesterdayData_curMonthAmount_tran = useTransition(yesterdayData_curMonthAmount, {
  duration: 500,
})
    
</script>      
<style>
.el-col {
    text-align: center;
}
</style>